<template>
  <div class="all">
    <RouterView />
    <div class="foot">
      <van-tabbar v-model="active" active-color="#ee0a24">
        <van-tabbar-item @click="tiao(0, '/index/shou')" icon="wap-home"
          >首页</van-tabbar-item
        >
        <van-tabbar-item @click="tiao(1, '/index/buy')" icon="bars"
          >我要买</van-tabbar-item
        >
        <van-tabbar-item @click="tiao(2, '/index/sale')" icon="shop"
          >我要卖</van-tabbar-item
        >
        <van-tabbar-item @click="tiao(3, '/index/car')" icon="shopping-cart"
          >购物车</van-tabbar-item
        >
        <van-tabbar-item @click="tiao(4, '/index/my')" icon="manager"
          >我的</van-tabbar-item
        >
      </van-tabbar>
    </div>
    悬浮球
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { RouterView } from "vue-router";
import { useRouter, useRoute } from "vue-router";
const active = ref(0);
let router = useRouter();
let route = useRoute();
const tiao = (index, item) => {
  active.value = index;
  router.push(item);
};
onMounted(() => {
  if (route.path == "/index/shou") {
    active.value = 0;
  } else if (route.path == "/index/buy") {
    active.value = 1;
  } else if (route.path == "/index/sale") {
    active.value = 2;
  } else if (route.path == "/index/car") {
    active.value = 3;
  } else if (route.path == "/index/my") {
    active.value = 4;
  }
});
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.all {
  touch-action: manipulation;
}
.foot {
  width: 100vw;
  background-color: #d3d3d3;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
}
</style>